$(function() {
	//得到标签的引用，引用指向标签？    ----声明了一个变量，指向这个标签
	var address = $("#address");
	var province = $("#province");
	var city = $("#city");
	var area = $("#area");
	//类似于String类型？    ----声明一个变量，指向这个字符串（我觉得这个var和Object类型差不多，
	//相当于多态，实际上对象还是有自己类型的【字符串】，但是用Object来接）。
	var initProvince = "<option value=\"\">选择省（市）</option>";
	var initCity = "<option value=\"\">选择市（区）</option>";
	var initArea = "<option value=\"\">选择区（县）</option>";
		
	//将下拉框内容进行初始化
	province.html(initProvince);
	city.html(initCity);
	area.html(initArea);
	
	//加载province_city_county.xml文件，得到其中的数据，并用函数来去解析这个文件。
	$.ajax({
		//type值区分大小写吗？ ----改成get之后，还是能访问到资源，不区分大小写
		type :"get",
		//当url指向xml文件时，返回值是怎样的呢？
		url : "../../js/city.xml",
		//success回调函数可以直接指定函数？   ----这就相当于指定了回调函数
		success :function_getProviceFromXml,
		error:function(data){
			alert("加载xml文件失败了");
		}
	});
	
	//这个xml代表的含义是什么？ ---- 提示得：[Object XMLDocument] 
	function function_getProviceFromXml(xml) {
		//find的功能是什么？ ----find() 方法获得当前元素集合中每个元素的后代（所有后代）。
		var province_inXml = $(xml).find("prov");	
		//each()和eq()的功能是什么？  append（）和 attr（）的作用呢？---- 
		/*each() 方法规定为每个匹配元素规定运行的函数。
		  eq() 方法将匹配元素集缩减值指定 index 上的一个。
		  attr() 方法 设置或返回被选元素的属性的值。
		  append() 方法在被选元素的结尾（应该是指html）插入指定内容。
		*/
		province_inXml.each(function(i) {
			province.append("<option value=" + i + ">"+ province_inXml.eq(i).attr("text") + "</option>");
		});
	}
	
	function function_getCityFromXml(xml) {
		var province_inXml = $(xml).find("prov");
		//parseInt()的作用是什么？var又代表什么？----我觉得var是声明变量，我觉得类似于Object类型，接收类似于多态 。parseInt() 函数
		//可解析一个字符串，并返回一个整数(根据string的开头，来决定解析成哪一个进制的数字)。
		var pro_num = parseInt(province.val());
		var city_inXml = province_inXml.eq(pro_num).find("city");
		city_inXml.each(function(i) {
			city.append("<option  value=" + i + ">"+ city_inXml.eq(i).attr("text") + "</option>");
		});
	}
	
	function function_getAreaFromXml(xml) {
		var province_inXml = $(xml).find("prov");
		var pro_num = parseInt(province.val());
		var city_inXml = province_inXml.eq(pro_num).find("city");
		var city_num = parseInt(city.val());
		var area_inXml = city_inXml.eq(city_num).find("county");
		area_inXml.each(function(i) {
			area.append("<option  value=" + i + ">"+ area_inXml.eq(i).attr("text") + "</option>");
		});
	}
	
	//change函数的作用？----change事件会在文本内容或选项被更改时触发。该事件仅适用于<input type="text">和<textarea>以及<select>。
	province.change(function() {
		//province改变之后，要初始化city下拉框和area下拉框。
		city.html(initCity);
		area.html(initArea);
		if (province.val() != "") {
			$.ajax({
				type : "GET",
				//js前面加 “/” 和不加 “/” 有什么区别？----是绝对路径和相对路径的区别
				url : "../../js/city.xml",
				success : function_getCityFromXml
			});
			
			
		}
	});
	
	//市 下拉选择发生变化触发的事件
	city.change(function() {
		//city改变之后，要初始化area下拉框
		area.html(initArea);
		$.ajax({
			type : "GET",
			url : "../../js/city.xml",
			success : function_getAreaFromXml
		});
	});
	
	//区 下拉选择发生变化触发的事件
	area.change(function() {
		//text()函数的作用是什么？----text()用于html元素文本内容的存取，html()不但可以用于html元素文本内容的存取，
		//还可以用于html内容的存取。val()用于input元素内容的存取。
		var value = province.find("option:selected").text()
				+ city.find("option:selected").text()
				+ area.find("option:selected").text();
		//这个text(value)的意义又是什么？ ----和html（）一样，但是只能往标签里存放文本值。
		address.text(value);
		//在被引入文件中，可以使用原文件的标签。
		
	});
	
 
});


